<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <button>点我</button>

        <my-button></my-button>

        <my-button></my-button>

        <my-button></my-button>
        <my-button></my-button>

    </div>

    <br>
    <hr>

    <div id="app1">

        <my-button></my-button>
        <my-button></my-button>

    </div>


    <script>

        //Vue全局组件
        Vue.component("my-button",{
            template:'<button style="color: red;width: 80px;height: 60px;background-color: green" @click="btnFun">{{message}}</button>',
            data:function(){//组件的数据需要定义为函数
                return {"message":"点我啊"};
            }
            ,methods:{//组件的函数

               btnFun(){
                   alert('我被点了');
               }
            }
        });


        //1,构建Vue实例
        var app =  new Vue({
            el:"#app",//容器的id
            data:{ //定义数据
                message:"helloworld!!"
            }
        });

        //1,构建Vue实例
        var app =  new Vue({
            el:"#app1",//容器的id
            data:{ //定义数据
                message:"helloworld!!"
            }
        });

    </script>

</body>
</html>